<template>
    <div class="gas-monitor">
        <div class="gas-monitor-content">
            <!-- 温度监测 -->
            <div class="monitor-item monitor-item-1" :class="getStatusClass(temperatureValue, 'temperature')">
                <div class="monitor-icon">
                    <i class="icon-temperature"></i>
                </div>
                <div class="monitor-info">
                    <div class="monitor-name">温度</div>
                    <div class="monitor-value">
                        {{ temperatureValue }}{{ temperatureUnit }}
                    </div>
                </div>
                <div class="monitor-status">
                    <i :class="getStatusIcon(temperatureValue, 'temperature')"></i>
                    <span>{{ getStatusText(temperatureValue, 'temperature') }}</span>
                </div>
            </div>

            <!-- 湿度监测 -->
            <div class="monitor-item monitor-item-2" :class="getStatusClass(humidityValue, 'humidity')">
                <div class="monitor-icon">
                    <i class="icon-humidity"></i>
                </div>
                <div class="monitor-info">
                    <div class="monitor-name">湿度</div>
                    <div class="monitor-value">
                        {{ humidityValue }}{{ humidityUnit }}
                    </div>
                </div>
                <div class="monitor-status">
                    <i :class="getStatusIcon(humidityValue, 'humidity')"></i>
                    <span>{{ getStatusText(humidityValue, 'humidity') }}</span>
                </div>
            </div>

            <!-- 硫化氢监测 -->
            <div class="monitor-item monitor-item-3" :class="getStatusClass(sulfurHValue, 'sulfurH')">
                <div class="monitor-icon">
                    <i class="icon-sulfur"></i>
                </div>
                <div class="monitor-info">
                    <div class="monitor-name">硫化氢</div>
                    <div class="monitor-value">
                        {{ sulfurHValue }}{{ sulfurHUnit }}
                    </div>
                </div>
                <div class="monitor-status">
                    <i :class="getStatusIcon(sulfurHValue, 'sulfurH')"></i>
                    <span>{{ getStatusText(sulfurHValue, 'sulfurH') }}</span>
                </div>
            </div>

            <!-- 烟雾监测 -->
            <div class="monitor-item monitor-item-4" :class="getStatusClass(smokeValue, 'smoke')">
                <div class="monitor-icon">
                    <i class="icon-smoke"></i>
                </div>
                <div class="monitor-info">
                    <div class="monitor-name">烟雾</div>
                    <div class="monitor-value">
                        {{ smokeValue }}{{ smokeUnit }}
                    </div>
                </div>
                <div class="monitor-status">
                    <i :class="getStatusIcon(smokeValue, 'smoke')"></i>
                    <span>{{ getStatusText(smokeValue, 'smoke') }}</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "GasMonitor",
    props: {
        data: {
            type: Object,
            default: () => ({}),
        },
    },
    computed: {
        // 温度相关
        temperatureValue() {
            return this.data?.temperatureValue || '0.0';
        },
        temperatureUnit() {
            return this.data?.temperatureUnit || '℃';
        },

        // 湿度相关
        humidityValue() {
            return this.data?.humidityValue || '0.0';
        },
        humidityUnit() {
            return this.data?.humidityUnit || '%RH';
        },

        // 硫化氢相关
        sulfurHValue() {
            return this.data?.sulfurHValue || '0.0';
        },
        sulfurHUnit() {
            return this.data?.sulfurHUnit || 'ppm';
        },

        // 烟雾相关
        smokeValue() {
            return this.data?.smokeValue || '0.0';
        },
        smokeUnit() {
            return this.data?.smokeUnit || 'ppm';
        }
    },
    methods: {
        // 获取状态等级
        getStatusLevel(value, type) {
            const numValue = parseFloat(value) || 0;

            switch (type) {
                case 'temperature':
                    // 温度：-10℃到50℃为正常，50℃以上为预警，60℃以上为危险
                    if (numValue >= 60) return 'danger';
                    if (numValue >= 50) return 'warning';
                    if (numValue >= -10) return 'normal';
                    return 'warning';

                case 'humidity':
                    // 湿度：30%-70%为正常，70%-80%为预警，80%以上为危险
                    if (numValue >= 80) return 'danger';
                    if (numValue >= 70) return 'warning';
                    if (numValue >= 30) return 'normal';
                    return 'warning';

                case 'sulfurH':
                    // 硫化氢：0-5ppm为正常，5-10ppm为预警，10ppm以上为危险
                    if (numValue >= 10) return 'danger';
                    if (numValue >= 5) return 'warning';
                    return 'normal';

                case 'smoke':
                    // 烟雾：0-2ppm为正常，2-5ppm为预警，5ppm以上为危险
                    if (numValue >= 5) return 'danger';
                    if (numValue >= 2) return 'warning';
                    return 'normal';

                default:
                    return 'normal';
            }
        },

        // 获取状态样式类
        getStatusClass(value, type) {
            const level = this.getStatusLevel(value, type);
            return `status-${level}`;
        },

        // 获取状态图标
        getStatusIcon(value, type) {
            const level = this.getStatusLevel(value, type);
            switch (level) {
                case 'normal':
                    return 'icon-check';
                case 'warning':
                    return 'icon-warning';
                case 'danger':
                    return 'icon-danger';
                default:
                    return 'icon-check';
            }
        },

        // 获取状态文本
        getStatusText(value, type) {
            const level = this.getStatusLevel(value, type);
            switch (level) {
                case 'normal':
                    return '正常';
                case 'warning':
                    return '预警';
                case 'danger':
                    return '危险';
                default:
                    return '正常';
            }
        }
    }
}
</script>

<style scoped lang="scss">
.gas-monitor {
    height: 100% !important;
    padding: 8px;

    .gas-monitor-content {
        display: flex;
        flex-direction: column;
        gap: 8px;
        height: 100%;
    }

    .monitor-item {
        display: flex;
        align-items: center;
        padding: 8px 12px;
        background: rgba(0, 0, 0, 0.4);
        border-radius: 6px;
        border: 1px solid rgba(255, 255, 255, 0.1);
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        position: relative;
        overflow: hidden;
        cursor: pointer;
        will-change: transform, box-shadow, opacity;
        transform: translateZ(0); // 启用硬件加速

        // 非交互状态的基础动画
        animation: idleFloat 4s ease-in-out infinite, breathingGlow 3s ease-in-out infinite;

        // 背景渐变动画
        &::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
            animation: shimmer 3s ease-in-out infinite;
            z-index: 1;
        }

        // 背景闪烁错位延迟
        &.monitor-item-1::before {
            animation-delay: 0.3s;
        }

        &.monitor-item-2::before {
            animation-delay: 0.8s;
        }

        &.monitor-item-3::before {
            animation-delay: 1.3s;
        }

        &.monitor-item-4::before {
            animation-delay: 1.8s;
        }

        // 波浪扫描效果
        &::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 2px;
            height: 100%;
            background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.6), transparent);
            animation: waveScan 4s ease-in-out infinite;
            z-index: 1;
        }

        // 波浪扫描错位延迟
        &.monitor-item-1::after {
            animation-delay: 0.4s;
        }

        &.monitor-item-2::after {
            animation-delay: 0.9s;
        }

        &.monitor-item-3::after {
            animation-delay: 1.4s;
        }

        &.monitor-item-4::after {
            animation-delay: 1.9s;
        }

        // 确保内容在动画层之上
        >* {
            position: relative;
            z-index: 2;
        }

        // 交互状态动画
        &:hover {
            transform: translateY(-2px) scale(1.02);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);

            .monitor-icon {
                transform: scale(1.1) rotate(5deg);
                animation: iconBounce 0.6s ease-in-out;
            }

            .monitor-value {
                animation: valueGlow 0.5s ease-in-out;
            }
        }

        &:active {
            transform: translateY(0) scale(0.98);
            transition: all 0.1s ease;
        }

        // 状态样式
        &.status-normal {
            border-color: rgba(0, 230, 118, 0.3);
            background: rgba(0, 230, 118, 0.05);
            animation: idleFloat 4s ease-in-out infinite, normalPulse 6s ease-in-out infinite;

            &:hover {
                border-color: rgba(0, 230, 118, 0.5);
                box-shadow: 0 0 20px rgba(0, 230, 118, 0.3), 0 8px 25px rgba(0, 0, 0, 0.3);
            }
        }

        &.status-warning {
            border-color: rgba(255, 193, 7, 0.3);
            background: rgba(255, 193, 7, 0.05);
            animation: idleFloat 4s ease-in-out infinite, warningBlink 3s ease-in-out infinite;

            &:hover {
                border-color: rgba(255, 193, 7, 0.5);
                box-shadow: 0 0 20px rgba(255, 193, 7, 0.3), 0 8px 25px rgba(0, 0, 0, 0.3);
                animation: idleFloat 4s ease-in-out infinite, warningBlink 1.5s ease-in-out infinite;
            }
        }

        &.status-danger {
            border-color: rgba(244, 67, 54, 0.3);
            background: rgba(244, 67, 54, 0.05);
            animation: idleFloat 4s ease-in-out infinite, dangerPulse 1.5s ease-in-out infinite;

            &:hover {
                border-color: rgba(244, 67, 54, 0.5);
                box-shadow: 0 0 25px rgba(244, 67, 54, 0.4), 0 8px 25px rgba(0, 0, 0, 0.3);
                animation: idleFloat 4s ease-in-out infinite, dangerPulse 1s ease-in-out infinite;
            }
        }

        .monitor-icon {
            width: 24px;
            height: 24px;
            margin-right: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            color: #fff;
            opacity: 0.8;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            animation: iconFloat 3s ease-in-out infinite;
            will-change: transform;
            transform: translateZ(0);
        }

        // 图标错位动画延迟
        .monitor-item-1 .monitor-icon {
            animation-delay: 0.2s;
        }

        .monitor-item-2 .monitor-icon {
            animation-delay: 0.7s;
        }

        .monitor-item-3 .monitor-icon {
            animation-delay: 1.2s;
        }

        .monitor-item-4 .monitor-icon {
            animation-delay: 1.7s;
        }

        .monitor-info {
            flex: 1;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            gap: 8px;

            .monitor-name {
                font-size: 12px;
                color: rgba(255, 255, 255, 0.7);
                white-space: nowrap;
            }

            .monitor-value {
                font-size: 16px;
                font-weight: bold;
                color: #fff;
                line-height: 1.2;
                transition: all 0.3s ease;
                text-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
                will-change: text-shadow;
                white-space: nowrap;
                animation: numberFlicker 5s ease-in-out infinite;
                position: relative;

                // 添加微粒子效果
                &::before {
                    content: '·';
                    position: absolute;
                    top: -5px;
                    right: -8px;
                    font-size: 8px;
                    color: rgba(255, 255, 255, 0.6);
                    animation: particleFloat 3s ease-in-out infinite;
                }

                &::after {
                    content: '·';
                    position: absolute;
                    bottom: -5px;
                    right: -12px;
                    font-size: 6px;
                    color: rgba(255, 255, 255, 0.4);
                    animation: particleFloat 3s ease-in-out infinite reverse;
                    animation-delay: 1.5s;
                }
            }
        }

        .monitor-status {
            display: flex;
            align-items: center;
            gap: 4px;
            font-size: 11px;
            padding: 2px 6px;
            border-radius: 3px;
            min-width: 50px;
            justify-content: center;

            i {
                font-size: 10px;
            }

            span {
                font-size: 10px;
            }
        }

        // 状态颜色
        &.status-normal .monitor-status {
            color: #00e676;
            background: rgba(0, 230, 118, 0.15);
        }

        &.status-warning .monitor-status {
            color: #ffc107;
            background: rgba(255, 193, 7, 0.15);
        }

        &.status-danger .monitor-status {
            color: #f44336;
            background: rgba(244, 67, 54, 0.15);
        }
    }

    // 错位动画延迟
    .monitor-item-1 {
        animation-delay: 0s;
    }

    .monitor-item-2 {
        animation-delay: 0.5s;
    }

    .monitor-item-3 {
        animation-delay: 1s;
    }

    .monitor-item-4 {
        animation-delay: 1.5s;
    }

    // 非交互状态动画
    @keyframes idleFloat {

        0%,
        100% {
            transform: translateY(0px);
        }

        50% {
            transform: translateY(-1px);
        }
    }

    @keyframes shimmer {
        0% {
            left: -100%;
        }

        100% {
            left: 100%;
        }
    }

    @keyframes iconFloat {

        0%,
        100% {
            transform: translateY(0px) rotate(0deg);
        }

        50% {
            transform: translateY(-1px) rotate(1deg);
        }
    }

    // 状态特定动画
    @keyframes normalPulse {

        0%,
        100% {
            box-shadow: 0 0 5px rgba(0, 230, 118, 0.1);
        }

        50% {
            box-shadow: 0 0 10px rgba(0, 230, 118, 0.2);
        }
    }

    @keyframes warningBlink {

        0%,
        100% {
            opacity: 1;
            box-shadow: 0 0 5px rgba(255, 193, 7, 0.2);
        }

        50% {
            opacity: 0.8;
            box-shadow: 0 0 15px rgba(255, 193, 7, 0.4);
        }
    }

    @keyframes dangerPulse {

        0%,
        100% {
            box-shadow: 0 0 5px rgba(244, 67, 54, 0.2);
            transform: scale(1);
        }

        50% {
            box-shadow: 0 0 20px rgba(244, 67, 54, 0.5);
            transform: scale(1.01);
        }
    }

    // 交互状态动画
    @keyframes iconBounce {

        0%,
        100% {
            transform: scale(1.1) rotate(5deg);
        }

        50% {
            transform: scale(1.2) rotate(-5deg);
        }
    }

    @keyframes valueGlow {

        0%,
        100% {
            text-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
        }

        50% {
            text-shadow: 0 0 15px rgba(255, 255, 255, 0.6);
        }
    }

    // 新增非交互动画
    @keyframes breathingGlow {

        0%,
        100% {
            box-shadow: 0 0 5px rgba(255, 255, 255, 0.1);
            border-color: rgba(255, 255, 255, 0.1);
        }

        50% {
            box-shadow: 0 0 15px rgba(255, 255, 255, 0.2);
            border-color: rgba(255, 255, 255, 0.2);
        }
    }

    @keyframes waveScan {
        0% {
            left: -2px;
            opacity: 0;
        }

        50% {
            opacity: 1;
        }

        100% {
            left: 100%;
            opacity: 0;
        }
    }

    @keyframes numberFlicker {

        0%,
        90%,
        100% {
            opacity: 1;
            transform: scale(1);
        }

        95% {
            opacity: 0.9;
            transform: scale(1.01);
        }
    }

    @keyframes particleFloat {
        0% {
            transform: translateY(0px) translateX(0px) rotate(0deg);
            opacity: 0;
        }

        10% {
            opacity: 1;
        }

        90% {
            opacity: 1;
        }

        100% {
            transform: translateY(-10px) translateX(5px) rotate(180deg);
            opacity: 0;
        }
    }

    // 图标样式（使用Unicode字符或字体图标）
    .icon-temperature::before {
        content: "🌡️";
    }

    .icon-humidity::before {
        content: "💧";
    }

    .icon-sulfur::before {
        content: "⚠️";
    }

    .icon-smoke::before {
        content: "💨";
    }

    .icon-check::before {
        content: "✓";
    }

    .icon-warning::before {
        content: "⚠";
    }

    .icon-danger::before {
        content: "⚠";
    }
}
</style>
